<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		
		<title>nodom-example start</title>
		<style>
			/*@import url(../examples/css/a.css);*/
			.c1{
				color:blue;
			}
			.c2{
				color:yellow;
			}
			
			
		</style>
		</head>

	<body>
		<h3>shadow</h3>
        <div class="div1">
		</div>
		<h3>非shadow</h3>
		<div class="div2">
		</div>
		<p class="name">第二行</p>
	</body>
	<script type='module'>
		const ct = document.createElement('div');
        document.querySelector('div').appendChild(ct);
        const shadowRoot = ct.attachShadow({mode:"open"});
        let c1 = document.createElement('p');
        c1.addEventListener('click',()=>{
            console.log(c1)
        },{});
        c1.innerHTML = `hello world!<div class='name'>yang</div><p class='c1'>c1 test</p>`;
        shadowRoot.appendChild(c1);
		//ct.appendChild(c1);
        let style = document.createElement('style');
		//@import url(../examples/css/a.css)
        style.innerHTML = `
			.name{
				color:red;
			}
        `
        shadowRoot.appendChild(style);
		const ct2 = document.createElement('div');
        document.querySelector('.div2').appendChild(ct2);
        c1 = document.createElement('p');
        c1.innerHTML = `hello world!<div class='name'>lei</div><p class='c1'>c1 test</p>`;
        ct2.appendChild(c1);
		style = document.createElement('style');
		style.innerHTML = `
			.name{
				color:red;
			}
        `
		//style.innerHTML = `
        //   @import url(../examples/css/a.css)
        //`
        c1.appendChild(style);
        //console.log(shadowRoot.querySelector('style'));
	</script>
</html>
